<template>
  <div ref="myDiv" style="height:100%;width:100%">
    <div style="height:100%;width:100%" v-if="!this.nothing">
      <div class="filenametype">
        <div class="filenametext">
          <span style="font-size: 16px;font-weight: 600;">{{this.filename}}</span>
        </div>
        <div :class="this.loaded ?'daochu1' : 'daochu'" @click="handleExport">导出</div>
      </div>
      <div v-if="this.loaded" class="plain_text_style">
        <div class="text">
          文件解析中
          <img src="~@/assets/images/static/loading.gif" alt="" style="width:50px;height:50px">
          <!-- <span class="circle1" v-if="loadingText.indexOf('1') != -1">●</span>

          <span class="circle1" v-if="loadingText.indexOf('2') != -1">●</span>
          <span class="circle2" v-if="loadingText.indexOf('2') != -1">●</span>

          <span class="circle1" v-if="loadingText.indexOf('3') != -1">●</span>
          <span class="circle2" v-if="loadingText.indexOf('3') != -1">●</span>
          <span class="circle3" v-if="loadingText.indexOf('3') != -1">●</span> -->
        </div>
      </div>
      <el-table
        :data="tableData"
        :height="dtheight"
        :cell-style="tableCellStyle"
        style="width: 100%;margin-top:16px">
        <el-table-column
          prop="index"
          label=""
          width="80">
        </el-table-column>
        <el-table-column
          prop="date"
          label="原文"
          width="280">
        </el-table-column>
        <el-table-column
          prop="name"
          label="类型"
          width="280">
        </el-table-column>
        <el-table-column
          prop="address"
          label="解析结果"
          width="">
        </el-table-column>
      </el-table>
    </div>
    <div v-if="this.nothing" class="nothing">
      <img  src="~@/assets/images/nothing.png" style="height:20%;width:20%"/>
    </div>
  </div>
</template>

<script>


import {getFileDetilData, exportRefundExcel } from '@/api/baiduapi.js'
export default {
  components: {

  },
  props:{
    listdata: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // loaded: {
    //   type: Boolean,
    //   default:null
    // }
  },
  data() {
    return {
      tableData: [ ],
      filename:'',
      dtheight:0,
      nothing:false,
      loadingText:'',
      loaded:true
    }
  },
  mounted() {
    this.observeDivWidth();
    if(this.listdata.length === undefined){
      this.nothing = true
    }
    if (this.listdata.type==='2'){
      this.nothing = false
      this.loaded = true
      // console.log('进入解析文件',this.listdata)
      // console.log('loaded解析文件',this.loaded)
      this.filename = this.listdata.filename
      this.getTableData(this.listdata.id)
      this.startLoadingAnimation();
    }
  },
  methods: {
    observeDivWidth() {
      const myDiv = this.$refs.myDiv;
      const observer = new ResizeObserver(entries => {
        for (let entry of entries) {
          // this.dtheight = `calc(100vh - ${entry.borderBoxSize[0].blockSize})` 
          this.dtheight = entry.borderBoxSize[0].blockSize -76
          console.log('Div width Height:', this.dtheight)
          // 你可以在这里执行其他逻辑
        }
      });
      observer.observe(myDiv);
    },
    getTableData(fileId){
      getFileDetilData(fileId).then(res=>{
        console.log('file_res', res)
        let resData = res.data.list
        for(let i = 0; i < resData.length; i++){
          this.tableData.push({
            index: i + 1,
            date: resData[i].content,
            name: resData[i].type,
            address: resData[i].result
          })
        }
        if (this.tableData.length <= 170) {
          for(let i = this.tableData.length; i < 170 ; i++){
            this.tableData.push({
              index: i + 1,
              date: '',
              name: '',
              address: ''
            })
          }
        }
        setTimeout(() => {
          this.loaded = false
        }, 1000);
      })
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "background:#F0F0F0";
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      if(!this.loaded){
        let fileName = this.listdata.filename
        console.log('fileName',fileName)
        let pos =  fileName.lastIndexOf(".");
        let lastName =  fileName.substring(0, pos);
        console.log('lastName',lastName)
        // 处理查询参数
        let params = {
          pageNo : undefined,
          pageSize : undefined,
          id: this.listdata.id
        };
        // 执行导出
        exportRefundExcel(params).then(response => {
          this.$download.excel(response, lastName);
        }).catch(() => {});
      }
    },
    startLoadingAnimation() {
      const dots = ['1', '2', '3'];
      let dotIndex = 0;
      setInterval(() => {
        dotIndex = (dotIndex + 1) % dots.length;
        this.loadingText = dots[dotIndex];
      }, 500);
      24
    }
  }
}
</script>

<style lang="scss" scoped>
.filenametype {
  height: 48px;
  width: 102.5%;
  background-color: #ffffff;
  margin-left: -1.3%;
  // margin: -1% -1.6% 16px;
  // margin-top: 16px;
  // display: flex;
  // align-items: center;
}
.filenametext {
  width: 50%;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
  margin-left: 16px;
}
.daochu {
  float: right;
  height: 32px;
  width: 72px;
  border: 1px solid #2468F2;
  border-radius: 10px;
  color: #2468F2;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  margin: 8px 16px 8px 0;
  cursor: pointer;
}
.daochu1[data-v-52466da8] {
  float: right;
  height: 32px;
  width: 72px;
  /* border: 2px solid #1890ff; */
  border-radius: 10px;
  // color: #1890ff;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  align-items: center;
  margin: 8px 16px 8px 0;
  cursor: not-allowed;
  background-color: #e6ebf5;
  color: #B8BABF;
}
.plain_text_style{
  margin-top: 12px;
  padding: 10px;
  background-color: #FFFFFF;
  font-size: 14px;
  font-family: "微软雅黑";
  height: 100%;
  width: 100%;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如果也需要水平居中的话 */
  display: flex;
}
.text{
  line-height: 1.5;
  display: flex;
  align-items: center; /* 垂直居中 */
}
.circle1{
  font-size: 15px;
  color: #FF6966;
}
.circle2{
  font-size: 15px;
  color: #528EFF;
}
.circle3{
  font-size: 15px;
  color: #7BD964;
}
.nothing {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
</style>
